import Taro from '@tarojs/taro'
import {View, Image, Text} from '@tarojs/components'
import {unitConvert} from '../../utils/utils'
import moment from 'moment'
import {AtTag} from 'taro-ui'

import './index.less'

export default class ProjectItem extends Taro.Component {

  navigateTo = url => {
    Taro.navigateTo({url: url})
  }

  render() {
    const {item = {}} = this.props
    const date = moment(item.updated_at).format('YYYY-MM-DD')
    const priceUnit = unitConvert(item.price)
    const tagArray = item.tags ? item.tags.split(',') : []

    return (
      <View className='project-item' onClick={this.navigateTo.bind(this, `/pages/project_detail/index?id=${item.id}`)}>
        <View className='img-wrapper'>
          <Image mode='widthFix' className='img' src={item.img}/>
        </View>
        <Text className='title'>{item.name}</Text>
        <View className='meta'>
          <View className='tags'>
            {
              tagArray.length && tagArray.map(val => <AtTag key={val} type='primary' size='small' customStyle={{marginRight: '4Px', color:'#0cf'}}>{val}</AtTag>)
            }
          </View>
          <Text className='date'>{date}</Text>
        </View>
        <View className='meta'>
          <Text className='address'>{item.province} {item.address}</Text>
          <View className='price-wrapper'>
            <Text className='price-unit'>
              <Text class='price'>{item.negotiable ? '面议' : priceUnit.num}</Text>
              {
                !item.negotiable && <Text class='unit'>{priceUnit.unit}</Text>
              }
            </Text>
          </View>
        </View>
      </View>
    )
  }
}